<template>
  <div class="controller">
    <Close :value="power" @change="$emit('update:power',!power)">Power</Close>
    <h4>{{id}}</h4>
    <Play @change="changePlay"/>
    <Close :value="bank" @change="$emit('update:bank',!bank)">Bank</Close>
  </div>

</template>

<script>
import Close from './Close.vue';
import Play from './Play.vue';
export default {
  props:['id','power','bank'],
  data() {
    return {

    }
  },
  components: {
    Close,
    Play
  },
  methods: {
    // 接受子组件传过来的参数,再次传给父组件
    changePlay(value) {
      this.$emit('changeVolume' , value)
    }
  }

}
</script>

<style lang="scss" scoped>
.controller {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h4 {
    width: 120px;
    height: 40px;
    background: #ccc;
    text-align: center;
    line-height: 40px;
    margin: 15px 0;
  }
}

</style>